<template>
    <div class="find" ref="findDOM">
        <div class="findTop">
            <h2>发现</h2>
            <p style="display: flex;align-items: center;cursor: pointer;"
                @click="() => router.push('/home/songSheetRecommend')">歌单推荐<el-icon
                    style="margin-left: 0.3vw;margin-top: 0.3vw;">
                    <ArrowRightBold />
                </el-icon></p>
            <div class="songSheetList">
                <div v-if="!loading" class="songSheet">
                    <div v-for="( item ) in recommendSongSheet " @click="getHandleSongData(item)" :key="item.id">
                        <img v-lazys="item.picUrl">
                        <div class="introduce">
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="findFooler">
            <div class="toplist">
                <div v-for="(item, index) in topList" :key="index" class="tabList"
                    @click="getLeaderboardData(item.id, index)">
                    <p>{{ item.name }}</p><span v-show="topIndex === index">-</span>
                </div>
            </div>
            <button @click="playAllTheSongs"><el-icon>
                    <VideoPlay />
                </el-icon>
                <div>全部播放</div>
                <div>50</div>
            </button>
            <div>
                <MusicList :data="leaderboardData" />
            </div>
        </div>
        <div class="footer">
            <p>近期发行的热度最高的50首新歌，每周四更新</p>
            <div>
                <button @click="backToTop">返回顶部</button>
            </div>
        </div>
        <div style="position: absolute;top: 50vh;width: 75%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { getRecommendSongSheet, getSongSheetInfo } from '@/api/songSheet';
import { getTopList } from '@/api/the-charts'
import useCounterStore from '@/stores/counter';
import MusicList from '@/components/musicList.vue';
const router = useRouter()
const { playList, songInfo } = toRefs(useCounterStore())//获取pinia的状态
const findDOM = ref<any>()
const recommendSongSheet = ref([] as Array<any>)//推荐歌单表
const topList = ref([] as Array<any>)//排行榜
const topIndex = ref<number>(0)//排行榜索引
const leaderboardData = ref([] as Array<any>)//排行榜数据
const loading = ref<boolean>(false);// 加载

onMounted(async () => {
    // 调用songSheetAPI的getRecommendSongSheet方法获取推荐歌曲表
    const [toplist, recommend] = await Promise.all([getTopList(), getRecommendSongSheet()])
    if (toplist.data.code === 200 && recommend.data.code === 200) {
        // 将toplist.data.list的前3个元素赋值给topList
        topList.value = toplist.data.list.slice(0, 3)
        // 调用getLeaderboardData方法，获取排行榜数据
        getLeaderboardData(toplist.data.list[0].id)
        // 将推荐歌曲表赋值给recommendSongSheet
        recommendSongSheet.value = recommend.data.recommend.slice(0, 10)
    }
    getRecommendSongSheet().then((res) => {
        // 如果返回的状态码为200
        if (res.data.code === 200) {
            // 将推荐歌曲表赋值给recommendSongSheet
            recommendSongSheet.value = res.data.recommend.slice(0, 10)
        }
    })
})

// 用于获取排行榜数据，参数id和index，index的默认值为0
async function getLeaderboardData(id: number, index: number = 0) {
    // 将index的值赋值给topIndex.value
    topIndex.value = index
    // 调用getSongSheetInfo函数，获取数据
    const { data } = await getSongSheetInfo({ id })
    // 如果返回的数据的code为200，则将data.playlist.tracks的前50条数据赋值给leaderboardData.value
    if (data.code === 200) {
        leaderboardData.value = data.playlist.tracks.slice(0, 50)
    }
}
//获取表单中的数据
const getHandleSongData = (item: any) => {
    // 跳转到歌曲信息页面
    router.push({ path: '/home/songSheetInfo', query: { id: item.id } })
}
// 返回顶部
function backToTop() {
    // 获取DOM元素
    findDOM.value.scrollTo({
        // 滚动到顶部
        top: 0,
        // 以平滑的方式滚动
        behavior: 'smooth'
    })
}
//播放全部
function playAllTheSongs() {
    // 将leaderboardData的值赋值给playList
    playList.value = leaderboardData.value
    // 将leaderboardData的第一个值赋值给songInfo
    songInfo.value = leaderboardData.value[0]
}

</script>

<style lang="scss" scoped>
.find::-webkit-scrollbar {
    display: none;
}

.find {
    width: 100%;
    height: 88%;
    margin-top: 10dvh;
    overflow: auto;
    animation: identifier 3s;
    padding-bottom: 2vh;


    @keyframes identifier {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .findTop {
        width: 100%;
        height: 70vh;
        padding: 0 2vw;
        box-sizing: border-box;

        h2 {
            color: rgba(255, 255, 255, 0.8);
        }

        >p {
            margin: 2vh 0 1vh 0;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 700;
        }

        .songSheetList {
            width: 100%;

            .tabList::-webkit-scrollbar {
                display: none;
            }

            .tabList {
                width: 100%;
                color: #fff;
                overflow: auto;
                height: 8vh;
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                >div {
                    margin: 2vh 1vw;
                    font-size: 12px;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 50px;
                    padding: 5px 10px;
                    cursor: pointer;
                }
            }
        }
    }
}

.songSheet {
    display: flex;
    flex-wrap: wrap;

    >div {
        width: 20%;
        height: 28.5vh;
        margin: 1% 0;
        cursor: pointer;
        position: relative;

        .mask {
            position: absolute;
            top: 0;
            width: 100%;
            height: 22vh;
            left: 0;
            background: rgba(255, 255, 255, 0.2);
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
        }

        .formatNumber {
            position: absolute;
            top: 2vh;
            right: 1vw;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
        }

        img {
            height: 12.5vw;
            width: 12.5vw;
            border-radius: 4px;
        }

        .introduce {
            width: 12vw;
            height: 6vh;
            margin-top: 0.3vh;
            padding: 2px 0;
            box-sizing: border-box;

            >P {
                color: #fff;
                font-size: 12px;
            }
        }
    }
}

.findFooler {
    .toplist {
        width: 16vw;
        margin-top: 8vh;
        margin-bottom: 2vh;
        margin-left: 2vw;
        color: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: space-between;

        >div {
            cursor: pointer;
            text-align: center;
            position: relative;

            >span {
                position: absolute;
                top: 0.5vh;
                left: 1.48vw;
                font-size: 30px;
            }
        }


    }

    button {
        margin-left: 2vw;
        border-radius: 10px;
        height: 5.5vh;
        width: 12vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-weight: 600;
        font-size: 12px;
        padding: 0 10px;
        cursor: pointer;
        margin: 4vh 2vw;

        div {
            line-height: 100%;
        }
    }
}


.footer {
    margin-top: 2vh;
    margin-left: 2vw;

    p {
        color: rgba(255, 255, 255, 0.3);
        font-size: 12px;
    }

    div {
        width: 100%;
        text-align: center;
        margin-top: 3vh;

        button {
            width: 24vw;
            height: 8vh;
            border-radius: 10px;
            border: 0;
            background: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 255, 0.8);
            cursor: pointer;
        }

        button:hover {
            background: rgba(255, 255, 255, 0.3);
        }
    }

}

.selectedItem {
    border: 0.1px solid rgb(255, 102, 102);
    background: rgba(206, 98, 98, 0.2) !important;
    color: rgb(255, 166, 166);
}

.find::-webkit-scrollbar {
    display: none;
}</style>